<template>
	<input type="text" class="input" @input="Cinput" @blur="loseinput" :class="{success: flag === 'success', error: flag === 'error'}" @keyup.enter="kEnter" />
	<!-- change或者blur，跳转显示必须用blur  -->
</template>

<script>
export default {
	// 要求传入正则表达式 RegExp
	props: {
		// value: String,
		rules: RegExp,
		msg: {
			type: String,
			default: "用户输入不合法",
		},
	},
	methods: {
		// 不能省略 值需要回传
		Cinput(e) {
			// e.target 触发事件的真实 DOM 节点
			// console.log(e.target.value);
			// v-model 自定义组件双向绑定的时候需要把值进行回传
			this.$emit("input", e.target.value);
		},
		loseinput(e) {
			// 如果有有传入表达式，undefined 是调用 .test() 会报错，所以加一层判断
			if (this.rules) {
				// 正则对象.test(字符串)
				if (this.rules.test(e.target.value)) {
					this.flag = "success";
				} else {
					this.flag = "error";
					this.$notify(this.msg);
				}
			}
		},
		kEnter() {
			this.$emit("keN");
		},
	},
	data() {
		return {
			flag: "",
		};
	},
};
</script>

<style lang="less" scoped>
.input {
	width: 318px;
	height: 50px;
	outline: none;
	border: none;
	border-bottom: 2px solid #ccc;
	background-color: #f2f2f2;
	font-size: 20px;
	line-height: 50px;
	margin: 10px auto;
	display: block;
}
.success {
	border-bottom-color: #07c160;
	color: #07c160;
}
.error {
	border-bottom-color: #ee0a24;
	color: #ee0a24;
}
</style>
